<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>



</head>

<body>
    <div id="app">
        <parent-component></parent-component>
    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, reactive, provide, inject, getCurrentInstance } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                // 获取当前应用实例
                const app2 = getCurrentInstance()
                console.log("app2===>", app2);

                return {

                }
            },

        })

        // 注册组件 全局注册
        // app.component(组件名称, 组件对象)

        // 父组件
        app.component('parent-component', {
            setup() {
                const msg = ref('我是来自父组件的数组')
                // provide(key,value)   提供
                provide('message', msg)
                return {
                    msg
                }
            },
            // 模板
            template: `
                <h1>父组件</h1>
                <child-component></child-component>
            `
        })

        // 子组件
        app.component('child-component', {
            setup() {
                // inject(key)  获取来自父组件的数据
                const abc = inject('message')
                console.log("接收父组件的数据msg==>", abc);

                return {
                    abc
                }
            },
            template: `
                <h3>子组件</h3>
                <p>展示父组件的数组===>{{abc}}</p>
            `
        })
        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>